import React, { useState, useEffect } from 'react'
import { motion } from 'framer-motion'
import { 
  OperaCharacter, 
  OperaCharacterGroup, 
  OperaDance, 
  OperaLoadingCharacter,
  OperaCharacterLine 
} from './OperaCharacter'

const LoadingPage = () => {
  const [progress, setProgress] = useState(0)
  const [loadingText, setLoadingText] = useState('正在加载京韵织梦...')

  useEffect(() => {
    const loadingTexts = [
      '正在加载京韵织梦...',
      '初始化AI京歌生成器...',
      '准备情景式互动体验...',
      '加载国潮UI社区...',
      '即将为您呈现传统与现代的完美融合...'
    ]

    const interval = setInterval(() => {
      setProgress(prev => {
        if (prev >= 100) {
          clearInterval(interval)
          return 100
        }
        return prev + 2
      })
    }, 50)

    const textInterval = setInterval(() => {
      setLoadingText(prev => {
        const currentIndex = loadingTexts.indexOf(prev)
        return loadingTexts[(currentIndex + 1) % loadingTexts.length]
      })
    }, 600)

    return () => {
      clearInterval(interval)
      clearInterval(textInterval)
    }
  }, [])

  return (
    <div className="min-h-screen theme-home flex items-center justify-center relative overflow-hidden">
      {/* 京剧人物背景装饰 */}
      <div className="absolute inset-0 opacity-20">
        <OperaCharacter type="dan" size="large" position="left" animated={true} />
        <OperaCharacter type="sheng" size="large" position="right" animated={true} />
        <OperaCharacter type="jing" size="medium" position="center" animated={true} />
      </div>

      {/* 首页主题背景装饰 */}
      <div className="absolute inset-0">
        <div className="absolute top-1/4 left-1/4 w-64 h-64 bg-opera-red/20 rounded-full blur-3xl animate-pulse-slow"></div>
        <div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-opera-red/15 rounded-full blur-3xl animate-pulse-slow animation-delay-400"></div>
        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-opera-red/10 rounded-full blur-3xl animate-pulse-slow animation-delay-600"></div>
      </div>

      <motion.div 
        className="text-center z-10"
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.8 }}
      >
        {/* 京剧人物舞蹈动画 */}
        <motion.div
          className="mb-8"
          initial={{ scale: 0.8, opacity: 0 }}
          animate={{ scale: 1, opacity: 1 }}
          transition={{ duration: 1, delay: 0.2 }}
        >
          {/* 主要京剧人物舞蹈 */}
          <div className="mb-6">
            <OperaDance
              type="dan"
              action="gesture"
              size="xl"
              className="mx-auto"
            />
          </div>
          
          <h1 className="text-6xl font-bold jing-text-gradient text-shadow mb-4 jing-title">
            京韵织梦
          </h1>
          <p className="text-2xl text-white/80 font-light jing-content">
            Opera Dreamweaver
          </p>
        </motion.div>

        {/* 加载进度条 */}
        <motion.div 
          className="w-80 mx-auto mb-6"
          initial={{ width: 0 }}
          animate={{ width: 320 }}
          transition={{ duration: 0.8, delay: 0.5 }}
        >
          <div className="bg-white/20 rounded-full h-2 overflow-hidden">
            <motion.div
              className="h-full jing-gradient rounded-full"
              initial={{ width: 0 }}
              animate={{ width: `${progress}%` }}
              transition={{ duration: 0.1 }}
            />
          </div>
        </motion.div>

        {/* 加载文本 */}
        <motion.p 
          className="text-lg text-white/70 mb-8 min-h-[1.5rem]"
          key={loadingText}
          initial={{ opacity: 0, y: 10 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: -10 }}
          transition={{ duration: 0.3 }}
        >
          {loadingText}
        </motion.p>

        {/* 进度百分比 */}
        <motion.div
          className="text-3xl font-bold jing-text-gradient"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.8 }}
        >
          {progress}%
        </motion.div>

        {/* 京剧人物装饰线条 */}
        <motion.div
          className="mt-8"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 1 }}
        >
          <OperaCharacterLine
            characters={['dan', 'sheng', 'jing']}
            direction="horizontal"
            className="justify-center"
          />
        </motion.div>
      </motion.div>

      {/* 京剧人物装饰 */}
      <div className="absolute top-10 left-10 opacity-30">
        <OperaCharacter type="dan" size="small" animated={true} />
      </div>
      
      <div className="absolute bottom-10 right-10 opacity-30">
        <OperaCharacter type="sheng" size="medium" animated={true} />
      </div>
      
      <div className="absolute top-1/2 left-10 opacity-20">
        <OperaCharacter type="jing" size="small" animated={true} />
      </div>
    </div>
  )
}

export default LoadingPage
